<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Web Component with Resize Support</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        /* 设置组件默认样式 */
        :host {
            display: block;
            width: 100%;
            height: 100%;
        }
        #chart-container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div style="width: 600px; height: 400px;" id="chart-container">
    <chart-component title-color="blue" font-color="green"></chart-component>
</div>

<script>
    class ChartComponent extends HTMLElement {
        constructor() {
            super();
            // 创建 Shadow DOM 根节点
            const shadow = this.attachShadow({ mode: 'open' });

            // 创建一个 div 用于容纳 ECharts 图表
            const chartDiv = document.createElement('div');
            chartDiv.style.width = '100%';
            chartDiv.style.height = '100%';
//            chartDiv.id = 'chart-container';

            // 将 div 添加到 Shadow DOM 中
            shadow.appendChild(chartDiv);

            // 初始化 ECharts 实例
            this.chart = echarts.init(chartDiv);
        }

        connectedCallback() {
            const titleColor = this.getAttribute('title-color') || 'black';
            const fontColor = this.getAttribute('font-color') || 'black';
            // 设置图表选项
            const option = {
                title: {
                    text: 'ECharts 入门示例',
                    textStyle: {
                        color: titleColor
                    }
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                    axisLabel: {
                        color: fontColor
                    }
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data:  [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            this.chart.setOption(option);

            // 调整初始大小
            this.resizeChart();

            // 监听 resize 事件
            window.addEventListener('resize', this.resizeChart.bind(this));

            // 观察父容器的大小变化
            if (ResizeObserver) {
                this.observer = new ResizeObserver(() => this.resizeChart());
                this.observer.observe(this.parentElement);
            }
        }

        disconnectedCallback() {
            // 移除 resize 事件监听器以避免内存泄漏
            window.removeEventListener('resize', this.resizeChart.bind(this));

            // 停止观察父容器的大小变化
            if (this.observer) {
                this.observer.disconnect();
            }
        }

        resizeChart() {
            // 调整图表大小
            this.chart.resize();
        }
    }

    // 定义新的 HTML 元素
    customElements.define('chart-component', ChartComponent);
</script>
</body>
<script>
    const dynamicDiv = document.getElementById('chart-container');

    let currentWidth = 600;
    let currentHeight = 400;

    function resizeDiv() {
        // 随机生成新的宽度和高度
        currentWidth += Math.random() * 50 - 25; // 在 -25 到 25 之间变化
        currentHeight += Math.random() * 50 - 25; // 在 -25 到 25 之间变化

        // 确保宽度和高度在合理范围内
        currentWidth = Math.max(50, Math.min(600, currentWidth));
        currentHeight = Math.max(50, Math.min(400, currentHeight));

        // 更新 div 的宽度和高度
        dynamicDiv.style.width = `${currentWidth}px`;
        dynamicDiv.style.height = `${currentHeight}px`;
    }

    // 每秒调用一次 resizeDiv 函数
    setInterval(resizeDiv, 1000);
</script>
</html>